<template>
  <div class="wrapper">
    <div class="top">
      <div class="top_item">
        <div @click="() => {
          if (storeSettings.lr_pp_show_shengjutian) {
            storeSettings.lr_pp_show_shengjutian = false
          } else {
            storeSettings.lr_pp_show_shengjutian = true
          }
        }" :class="{ slc: storeSettings.lr_pp_show_shengjutian }" class="stbtn">显示神居天名</div>
        <div @click="() => {
          if (storeSettings.lr_pp_show_shenjudi) {
            storeSettings.lr_pp_show_shenjudi = false
          } else {
            storeSettings.lr_pp_show_shenjudi = true
          }
        }" :class="{ slc: storeSettings.lr_pp_show_shenjudi }" class="stbtn">显示神居地名</div>
      </div>
      <div class="top_item">
        <div @click="() => {
          if (storeSettings.lr_pp_show_zhizhangsheng) {
            storeSettings.lr_pp_show_zhizhangsheng = false
          } else {
            storeSettings.lr_pp_show_zhizhangsheng = true
          }
        }" :class="{ slc: storeSettings.lr_pp_show_zhizhangsheng }" class="stbtn">显示日支长生</div>
        <div @click="() => {
          if (storeSettings.lr_pp_show_rizhangsheng) {
            storeSettings.lr_pp_show_rizhangsheng = false
          } else {
            storeSettings.lr_pp_show_rizhangsheng = true
          }
        }" :class="{ slc: storeSettings.lr_pp_show_rizhangsheng }" class="stbtn">显示日干长生</div>
      </div>
    </div>
    <div class="bot">
      <div class="set_item">
        <div class="left">
          <i class="iconfont lricon-zitidaxiao"></i><span>神盘字体大小:</span>
        </div>
        <div class="right">
          <van-stepper @change="changeShen" input-width="60px" button-size="25rem"
            v-model="storeSettings.lr_pp_shen_size" step="0.1" :decimal-length="1" />
        </div>
      </div>
      <div class="set_item">
        <div class="left">
          <i class="iconfont lricon-zitidaxiao"></i><span>将盘字体大小:</span>
        </div>
        <div class="right">
          <van-stepper @change="changeFsize" input-width="60px" button-size="25rem"
            v-model="storeSettings.lr_pp_jiang_size" step="0.1" :decimal-length="1" />
        </div>
      </div>
      <div class="set_item">
        <div class="left">
          <i class="iconfont lricon-zitidaxiao"></i><span>遁干字体大小:</span>
        </div>
        <div class="right">
          <van-stepper @change="changeFsize" input-width="60px" button-size="25rem"
            v-model="storeSettings.lr_pp_dungan_size" step="0.1" :decimal-length="1" />
        </div>
      </div>
      <div class="set_item">
        <div class="left">
          <i class="iconfont lricon-zitidaxiao"></i><span>长生字体大小:</span>
        </div>
        <div class="right">
          <van-stepper @change="changeFsize" input-width="60px" button-size="25rem"
            v-model="storeSettings.lr_pp_zhangsheng_size" step="0.1" :decimal-length="1" />
        </div>
      </div>
      <div class="set_item">
        <div class="left">
          <i class="iconfont lricon-zitidaxiao"></i><span>可选字体大小:</span>
        </div>
        <div class="right">
          <van-stepper @change="changeFsize" input-width="60px" button-size="25rem"
            v-model="storeSettings.lr_pp_kexuan_size" step="0.1" :decimal-length="1" />
        </div>
      </div>
      <div class="set_item">
        <div class="left">
          <i class="iconfont lricon-zitidaxiao"></i><span>课传字体大小:</span>
        </div>
        <div class="right">
          <van-stepper @change="async () => {

          }" input-width="60px" button-size="25rem" v-model="storeSettings.lr_pp_sksc_size" step="0.1"
            :decimal-length="1" />
        </div>
      </div>
      <div class="set_item">
        <div class="left">
          <i class="iconfont lricon-zitidaxiao"></i><span>神煞字体大小:</span>
        </div>
        <div class="right">
          <van-stepper @change="async () => {

          }" input-width="60px" button-size="25rem" v-model="storeSettings.lr_pp_shensha_size" step="0.1"
            :decimal-length="1" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Overlay, Progress, Stepper, Switch, Slider } from "vant";
import { getAppStore } from "../../api/store";
export default {
  name: "Test",
  components: {
    VanStepper: Stepper
  },
  async created() {
    let appStore = await getAppStore()
    let storeSettings = await appStore.get('appSettings')
    this.storeSettings = { ...storeSettings }
  },
  data() {
    return {
      rdSettings: this.settings,
      appStore: null,
      storeSettings: {
        lr_pp_dungan_size: 0,
        lr_pp_jiang_size: 0,
        lr_pp_kexuan_size: 0,
        lr_pp_shen_size: 0,
        lr_pp_sksc_size: 0,
        lr_pp_shensha_size: 0,
        lr_pp_zhangsheng_size: 0,
        lr_pp_show_shengjutian: false,
        lr_pp_show_shenjudi: false,
        lr_pp_show_rizhangsheng: false,
        lr_pp_show_zhizhangsheng: false
      }
    };
  },
  props: {
    settings: {
      type: Object, // 指定类型为对象
      required: true, // 是否必传
    },
  },
  methods: {
  },
  watch: {
    storeSettings: {
      async handler(newVal, oldVal) {
        if (this.storeSettings.lr_pp_dungan_size == 0 || this.storeSettings.lr_pp_jiang_size == 0) {
          return;
        }
        document.documentElement.style.setProperty("--lr_pp_shen_size", this.storeSettings.lr_pp_shen_size + "rem");
        document.documentElement.style.setProperty("--lr_pp_dungan_size", this.storeSettings.lr_pp_dungan_size + "rem");
        document.documentElement.style.setProperty("--lr_pp_jiang_size", this.storeSettings.lr_pp_jiang_size + "rem");
        document.documentElement.style.setProperty("--lr_pp_zhangsheng_size", this.storeSettings.lr_pp_zhangsheng_size + "rem");
        document.documentElement.style.setProperty("--lr_pp_shensha_size", this.storeSettings.lr_pp_shensha_size + "rem");
        document.documentElement.style.setProperty("--lr_pp_sksc_size", this.storeSettings.lr_pp_sksc_size + "rem");
        document.documentElement.style.setProperty("--lr_pp_kexuan_size", this.storeSettings.lr_pp_kexuan_size + "rem");
        this.rdSettings.showShenjutian = this.storeSettings.lr_pp_show_shengjutian
        this.rdSettings.showShenjudi = this.storeSettings.lr_pp_show_shenjudi
        this.rdSettings.showZhizhangsheng = this.storeSettings.lr_pp_show_zhizhangsheng
        this.rdSettings.showRizhangsheng = this.storeSettings.lr_pp_show_rizhangsheng
        let appStore = await getAppStore()
        await appStore.set('appSettings', this.storeSettings)
      },
      deep: true, // 关键：开启深度监听（监听对象内部属性变化）
      immediate: false // 可选：是否在初始化时立即执行一次（默认 false）
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 82vw;
  height: fit-content;
  padding: 4vw;
  position: fixed;
  left: 5vw;
  border-radius: 11rem;
  background-color: #fff;
  bottom: calc(var(--lr_nav_height) + 10rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;

  .top {
    width: 82v;
    display: flex;
    height: fit-content;
    flex-direction: column;

    .top_item {
      margin-bottom: 10rem;
      width: 82vw;
      height: fit-content;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .slc {
        background-color: var(--cart_bg_color);
        color: #fff !important;
      }

      .stbtn {
        width: 30vw;
        border-radius: 6rem;
        height: 20rem;
        line-height: 20rem;
        font-size: 14px;
        padding-left: 5rem;
        padding-right: 5rem;
        text-align: center;
        color: var(--cart_bg_color);
        border: 1.5rem solid var(--cart_bg_color);
      }
    }
  }

  .bot {
    width: 82vw;

    .set_item {
      width: 82vw;
      height: 38rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .custom-button {
        width: 26px;
        color: #fff;
        font-size: 10px;
        line-height: 18px;
        text-align: center;
        background-color: red;
        border-radius: 100px;
      }

      .left {
        display: flex;
        align-items: center;
        height: 38rem;
        font-size: 15rem;
        font-weight: 500;

        span {
          margin-left: 5rem;
        }

        i {
          color: var(--cart_bg_color);
          font-weight: 400;
          font-size: 14rem;
        }
      }
    }
  }
}
</style>